//进度
var vm = new Vue({
  el: '#app',
  data: function() {
    return {
      dateTime: {
        text: '',
        value: ''
      },
      bd: '一标段',
      prj: '海湖路立交',
      //#增加联动
      c1: '道路', //第四个柱状图参数名
      c2: 'A匝道', //第五个柱状图参数名
      jdtj: {
        cateArr: ['一标段', '二标段', '三标段'],
        data: []
      },
      fxjdtj: {
        cateArr: [],
        data: []
      },
      qljdtj: {
        cateArr: [],
        data: []
      },
      //#增加联动
      //定义第四项图表数据格式
      fourData: {
        cateArr: [],
        data: []
      },
      //定义第五项图表数据格式
      fifthData: {
        cateArr: [],
        data: [],
        data2: []
      }
    }
  },
  mounted: function() {
    var that = this;
    mui.init();
    that.setDate(); //设置初始时间
    mui.ready(function() {
      mui('#mainContent').scroll();
      $('.choseDate').on("tap", function() {
        var picker = new mui.DtPicker({
          type: 'month' //只显示年
        });
        picker.show(function(rs) {
          that.dateTime.text = rs.y.text + '年' + rs.m.text + '月';
          that.dateTime.value = rs.text;
          picker.dispose();
          //日期选择后的事件写在这
          console.log(that.dateTime.value)
        })
      });
      $('.toggle-nav').on('tap', function() {
        mui('.mui-off-canvas-wrap').offCanvas('show');
      });
      that.getData1(); //初始化获取一级数据
      that.getData2(that.bd); //初始化获取二标段分项数据
      that.getData3(); //初始化获取三标段桥梁数据
      // //#增加联动
      that.getData4(); //初始化获取第四项数据
      that.getData5(); //初始化获取第五项数据

    });
  },
  methods: {
    //获取一级数据
    getData1: function() {
      var that = this;
      loading.show();
      $.getJSON('http://fhs.vhuomai.cn/GetRateInfo1 ', {}, function(res) {
        that.jdtj.data = res;
        that.initCharts1();
        loading.hide();
      })
    },
    //获取二级数据
    getData2: function(bd) {
      var that = this;
      loading.show();
      $.getJSON('http://fhs.vhuomai.cn/GetRateInfo2', {
        'bd': bd
      }, function(res) {
        that.fxjdtj.cateArr = res.nameArray;
        that.fxjdtj.data = res.rateArray;
        that.initCharts2();
        loading.hide();
      })
    },
    //获取三级数据
    getData3: function() {
      var that = this;
      loading.show();
      $.getJSON('http://fhs.vhuomai.cn/GetRateInfo3', {
        "bd": that.bd,
        "prj": that.prj
      }, function(res) {
        that.qljdtj.cateArr = res.nameArray;
        that.qljdtj.data = res.rateArray;
        // that.qljdtj.data2 = res.data2;
        that.initCharts3();
        loading.hide();
      })
    },
    //#增加联动
    //获取四级数据
    getData4: function() {
      var that = this;
      loading.show();
      $.getJSON('http://fhs.vhuomai.cn/GetRateInfo4', {
        "bd": that.bd,
        "prj": that.prj,
        "c1": that.c1
      }, function(res) {
        //填充第四项数据
        that.fourData.cateArr = res.nameArray;
        that.fourData.data = res.rateArray;
        that.initCharts4(); //渲染第四项图表
        loading.hide();
      })
    },
    //获取五级数据
    getData5: function() {
      var that = this;
      loading.show();
      $.getJSON('http://fhs.vhuomai.cn/GetRateInfo5', {
        "bd": that.bd,
        "prj": that.prj,
        "c1": that.c1,
        "c2": that.c2
      }, function(res) {
        //填充第五项数据
        that.fifthData.cateArr = res.cateArr;
        that.fifthData.data = res.data1;
        that.fifthData.data2 = res.data2;
        that.initCharts5(); //渲染第五项图表
        loading.hide();
      })
    },
    //渲染图表1
    initCharts1: function() {
      var that = this;
      var myChart = echarts.init(document.getElementById('jdtj'), 'macarons');
      var option = {
        backgroundColor: '#ffffff', //背景色
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'none',
            crossStyle: {
              color: '#999'
            }
          },
          formatter: function(e) {
            return e[0].marker + '完成度：' + e[0].value + '%';
          }
        },
        legend: {
          data: ['完成度/%'],
          y: 'bottom'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '8%',
          top: 10,
          containLabel: true
        },
        xAxis: [{
          type: 'category',
          data: that.jdtj.cateArr,
          axisTick: {
            alignWithLabel: true
          }
        }],

        yAxis: [{
          type: 'value',
          min: 0,
          max: 100,
          axisLabel: {
            formatter: '{value}%'
          }
        }],

        series: [{
          name: '完成度/%',
          type: 'bar',
          barWidth: '30%',
          data: that.jdtj.data,
          itemStyle: {
            emphasis: {
              color: '#ff9900'
            }
          },
          label: {
            normal: {
              show: true,
              position: 'top'
            }
          },
        }]
      };
      myChart.setOption(option);
      myChart.on('click', function(param) {
        that.bd = param.name;
				loading.show();
				//二级图表
				$.getJSON('http://fhs.vhuomai.cn/GetRateInfo2', {
	        "bd": that.bd
	      }, function(res) {
	        that.fxjdtj.cateArr = res.nameArray;
	        that.fxjdtj.data = res.rateArray;
					that.prj=res.nameArray[0];
	        that.initCharts2();
					loading.hide()
					//三级图表
					$.getJSON('http://fhs.vhuomai.cn/GetRateInfo3', {
		        "bd": that.bd,
						"prj":that.prj
		      }, function(res) {
		        that.qljdtj.cateArr = res.nameArray;
		        that.qljdtj.data = res.rateArray;
						that.c1=res.nameArray[0];
		        that.initCharts3();
						//四级图表
						$.getJSON('http://fhs.vhuomai.cn/GetRateInfo4', {
			        "bd": that.bd,
							"prj":that.prj,
							"c1":that.c1
			      }, function(res) {
			        that.fourData.cateArr = res.nameArray;
			        that.fourData.data = res.rateArray;
							that.c2=res.nameArray[0];
			        that.initCharts4();
							//五级图表
							$.getJSON('http://fhs.vhuomai.cn/GetRateInfo5', {
				        "bd": that.bd,
								"prj":that.prj,
								"c1":that.c1,
								"c2":that.c2
				      }, function(res) {
				        that.fifthData.cateArr = res.nameArray;
				        that.fifthData.data = res.rateArray;
								that.c1=res.nameArray[0];
				        that.initCharts5();
				      })
			      })
		      })
	      })
      })
    },
    //渲染图表2
    initCharts2: function() {
      var that = this;
      var myChart2 = echarts.init(document.getElementById('fxjdtj'), 'macarons');
      var option2 = {
        backgroundColor: '#ffffff', //背景色
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'none',
            crossStyle: {
              color: '#999'
            }
          },
          formatter: function(e) {
            return e[0].marker + '完成度：' + e[0].value + '%';
          }
        },
        legend: {
          data: ['完成度/%'],
          y: 'bottom'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '8%',
          top: 10,
          containLabel: true
        },
        yAxis: [{
          type: 'category',
          data: that.fxjdtj.cateArr,
          axisTick: {
            alignWithLabel: true
          }
          //					,
          //					axisLabel: {
          //						interval: 0,
          //						rotate: -10
          //					}
        }],
        xAxis: [{
          type: 'value',
          min: 0,
          max: 100,
          axisLabel: {
            formatter: '{value}%'
          }
        }],

        series: [{
          name: '完成度/%',
          type: 'bar',
          barWidth: '20',
          data: that.fxjdtj.data,
					itemStyle: {
            emphasis: {
              color: '#ff9900'
            }
          },
          label: {
            normal: {
              show: true,
              position: 'right'
            }
          },
        }]
      };

      myChart2.setOption(option2);
      myChart2.on('click', function(param) {
        that.prj = param.name
				loading.show();
        // that.getData3();
				//清空4,5图表数据
				//三级图表
				$.getJSON('http://fhs.vhuomai.cn/GetRateInfo3', {
					"bd": that.bd,
					"prj":that.prj
				}, function(res) {
					that.qljdtj.cateArr = res.nameArray;
					that.qljdtj.data = res.rateArray;
					that.c1=res.nameArray[0];
					that.initCharts3();
					loading.hide();
					//四级图表
					$.getJSON('http://fhs.vhuomai.cn/GetRateInfo4', {
						"bd": that.bd,
						"prj":that.prj,
						"c1":that.c1
					}, function(res) {
						that.fourData.cateArr = res.nameArray;
						that.fourData.data = res.rateArray;
						that.c2=res.nameArray[0];
						that.initCharts4();
						//五级图表
						$.getJSON('http://fhs.vhuomai.cn/GetRateInfo5', {
							"bd": that.bd,
							"prj":that.prj,
							"c1":that.c1,
							"c2":that.c2
						}, function(res) {
							that.fifthData.cateArr = res.nameArray;
							that.fifthData.data = res.rateArray;
							that.c1=res.nameArray[0];
							that.initCharts5();
						})
					})
				})
      })

    },
    //渲染图表3
    initCharts3: function() {
      var that = this;
      var myChart3 = echarts.init(document.getElementById('qljdtj'), 'macarons');
      var option3 = {
        backgroundColor: '#ffffff', //背景色
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'none',
            crossStyle: {
              color: '#999'
            }
          },
          formatter: function(e) {
            return e[0].marker + '完成度：' + e[0].value + '%';
          }
        },
        legend: {
          data: ['完成度/%'],
          y: 'bottom'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '8%',
          top: 10,
          containLabel: true
        },
        yAxis: [{
          type: 'category',
          data: that.qljdtj.cateArr,
          axisTick: {
            alignWithLabel: true
          }
          //					,
          //					axisLabel: {
          //						interval: 0,
          //						rotate: -10
          //					}
        }],
        xAxis: [{
          type: 'value',
          min: 0,
          max: 100,
          axisLabel: {
            formatter: '{value}%'
          }
        }],

        series: [{
          name: '完成度/%',
          type: 'bar',
          barWidth: '20',
          data: that.qljdtj.data,
					itemStyle: {
            emphasis: {
              color: '#ff9900'
            }
          },
          label: {
            normal: {
              show: true,
              position: 'right'
            }
          },
        }]
      };

      myChart3.setOption(option3);
      myChart3.on('click', function(param) {
        that.c1 = param.name;
				loading.show();
        // that.getData4();
				//四级图表
				$.getJSON('http://fhs.vhuomai.cn/GetRateInfo4', {
					"bd": that.bd,
					"prj":that.prj,
					"c1":that.c1
				}, function(res) {
					that.fourData.cateArr = res.nameArray;
					that.fourData.data = res.rateArray;
					that.c2=res.nameArray[0];
					that.initCharts4();
					loading.hide();
					//五级图表
					$.getJSON('http://fhs.vhuomai.cn/GetRateInfo5', {
						"bd": that.bd,
						"prj":that.prj,
						"c1":that.c1,
						"c2":that.c2
					}, function(res) {
						that.fifthData.cateArr = res.nameArray;
						that.fifthData.data = res.rateArray;
						that.c1=res.nameArray[0];
						that.initCharts5();
					})
				})
      })

    },
    //渲染图表4
    initCharts4: function() {
      var that = this;
      var myChart4 = echarts.init(document.getElementById('fourth'), 'macarons');
      var option4 = {
        backgroundColor: '#ffffff', //背景色
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'none',
            crossStyle: {
              color: '#999'
            }
          },
          formatter: function(e) {
            return e[0].marker + '完成度：' + e[0].value + '%';
          }
        },
        legend: {
          data: ['完成度/%'],
          y: 'bottom'
        },
        grid: {
          left: '3%',
          right: '8%',
          bottom: '8%',
          top: 10,
          containLabel: true
        },
        yAxis: [{
          type: 'category',
          data: that.fourData.cateArr,
          axisTick: {
            alignWithLabel: true
          }
          //					,
          //					axisLabel: {
          //						interval: 0,
          //						rotate: -10
          //					}
        }],
        xAxis: [{
          type: 'value',
          min: 0,
          max: 100,
          axisLabel: {
            formatter: '{value}%'
          }
        }],

        series: [{
          name: '完成度/%',
          type: 'bar',
          barWidth: '20',
          data: that.fourData.data,
					itemStyle: {
            emphasis: {
              color: '#ff9900'
            }
          },
          label: {
            normal: {
              show: true,
              position: 'right'
            }
          },
        }]
      };

      myChart4.setOption(option4);
      myChart4.on('click', function(param) {
        that.c2 = param.name
				loading.show();
        // that.getData5();
				//五级图表
				$.getJSON('http://fhs.vhuomai.cn/GetRateInfo5', {
					"bd": that.bd,
					"prj":that.prj,
					"c1":that.c1,
					"c2":that.c2
				}, function(res) {
					console.log(res);
					that.fifthData.cateArr = res.cateArr;
					that.fifthData.data = res.data1;
					that.fifthData.data2 = res.data2;
					that.initCharts5();
					loading.hide();
				})
      })

    },
    //渲染图表5
    initCharts5: function() {
      var that = this;
      var myChart5 = echarts.init(document.getElementById('fifth'), 'macarons');
      var option5 = {
        backgroundColor: '#ffffff',
        textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
          color: '#333',
          position: "top"
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'none',
            crossStyle: {
              color: '#999'
            }
          }
        },
        legend: {
          data: ['已完成', '设计量'],
          y: 'bottom'
        },
        grid: {
          left: '5%',
          right: '4%',
          bottom: '8%',
          top: 0,
          containLabel: true
        },
        xAxis: {
          type: 'value'
        },
        yAxis: {
          type: 'category',
          data: that.fifthData.cateArr,
          axisLabel: {
            interval: 0, //标签设置为全部显示
            formatter: function(params) {
              var newParamsName = ""; // 最终拼接成的字符串
              var paramsNameNumber = params.length; // 实际标签的个数
              var provideNumber = 4; // 每行能显示的字的个数
              var rowNumber = Math.ceil(paramsNameNumber / provideNumber); // 换行的话，需要显示几行，向上取整
              /**
               * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
               */
              // 条件等同于rowNumber>1
              if (paramsNameNumber > provideNumber) {
                /** 循环每一行,p表示行 */
                for (var p = 0; p < rowNumber; p++) {
                  var tempStr = ""; // 表示每一次截取的字符串
                  var start = p * provideNumber; // 开始截取的位置
                  var end = start + provideNumber; // 结束截取的位置
                  // 此处特殊处理最后一行的索引值
                  if (p == rowNumber - 1) {
                    // 最后一次不换行
                    tempStr = params.substring(start, paramsNameNumber);
                  } else {
                    // 每一次拼接字符串并换行
                    tempStr = params.substring(start, end) + "\n";
                  }
                  newParamsName += tempStr; // 最终拼成的字符串
                }

              } else {
                // 将旧标签的值赋给新标签
                newParamsName = params;
              }
              //将最终的字符串返回
              return newParamsName
            }
          }

        },
        series: [{
            name: '已完成',
            type: 'bar',
            stack: '总量',
            label: {
              normal: {
                show: true,
                position: 'inside'
              }
            },
            data: that.fifthData.data
          },
          {
            name: '设计量',
            type: 'bar',
            stack: '总量',
            barWidth: '20', //柱图宽度
            label: {
              normal: {
                show: true,
                position: 'right'
              }
            },
            data: that.fifthData.data2
          }
        ]
      };
      myChart5.setOption(option5);
    },
    setDate: function() {
      var that = this;
      var now = new Date();
      var year = now.getFullYear();
      var month = now.getMonth();
      if (month > 1 && month < 9) {
        month = '0' + month;
      }
      var dateText = year + '年' + month + '月';
      var dateValue = year + '-' + month;
      that.dateTime.text = dateText;
      that.dateTime.value = dateValue;
    }

  }
})
